<template>
	<div class="api-drawer" :style="{width: width+'px'}">
		<div class="head">
			<div class="opear">
				<div>
					<span>{{apiForUE}}</span>
				</div>
				<div class="tools">
					<el-tooltip
						class="box-item"
						effect="dark"
						content="返回"
						placement="top"
					>
						<el-icon @click="back"><Right /></el-icon>
					</el-tooltip>
				</div>
			</div>
		</div>
		<div class="body">
			<el-scrollbar height="100%">
				<el-collapse accordion @change="change">
				  <el-collapse-item :title="menu.name" :name="menu.id" v-for="menu in menus" >
					<div class="item" v-for=" child in menu.children" @click="get(child)" :class="isActive === child.id? 'active': ''">
						<div class="dot"></div>
						<div><span>{{child.name}}</span></div>
					</div>
				  </el-collapse-item>
				</el-collapse>
			</el-scrollbar>
		</div>
	</div>
</template>

<script setup lang="ts">
	
	import { ref } from 'vue'
	import {
	  Right
	} from '@element-plus/icons-vue' 
	import {listForAPIByVersion,getForAPI} from "@/api/itester";
	import { useRouter} from 'vue-router'
	const router = useRouter()
	const apiForUE=ref('api调试器');
	const menus=ref();
	const loading=ref(false)
	const isActive=ref('');
	const width=ref(0);
	
	const load=(version:string)=>{
		loading.value=true
		listForAPIByVersion({
			version:version
		})
		.then(({result}) => {
			 menus.value=result
			 loading.value=false
		})
		.catch((e:any) => {
		})
		.finally(() => {
			loading.value=false
		});
	}
	
	const change=(activeNames:any)=>{
		isActive.value ='';
		emits('handleClick', null)
	}
	
	const emits = defineEmits(['handleClick'])
	const get=(data:any)=>{
		if(isActive.value == data.id){
		}else{
			if (isActive.value !== data.id) {
				isActive.value = data.id;
			} else {
				isActive.value = '';
			}
			loading.value=true
			getForAPI({
				id:data.id,
				type:data.type
			})
			.then(({result}) => {
				emits('handleClick', result)
			})
			.catch((e:any) => {
			})
			.finally(() => {
				loading.value=false
			});
		}
	}
	
	const collapse=(value:boolean)=>{
		if(value){
			width.value=250;
		}else{
			width.value=0;
		}
		
	}
	
	const back=()=>{
		apiForUE.value='api调试器'
		router.push({ path: '/scene/scene'})
	}
	
	const setName=(name:string)=>{
		apiForUE.value=name
	}
	
	defineExpose({
	  load,collapse,setName
	});
	
	onMounted(() => {
	});
	
</script>


<style  scoped>
	.api-drawer{
		height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		width: 0px;
		border-left: 1px solid #373c54;
		position: absolute;
		z-index: 1;
		background-color:  #212332;
		overflow: hidden;
		transition: all .3s ease;
		-moz-user-select:none; /*火狐*/
		-webkit-user-select:none; /*webkit浏览器*/
		-ms-user-select:none; /*IE10*/
		-khtml-user-select:none; /*早期浏览器*/
		user-select:none;
		>.head{
			border-bottom: 1px solid #373c54;
			background-color: #2a2d3e;
			height: 40px;
			>.opear{
				width: 250px;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				>div{
					padding: 0.3125rem;
					>span{
						border-left-width: 3px!important;
						padding-left: 8px!important;
						height: 16px;
						line-height: 17px;
						font-size: 13px;
						color: #ccc;
						-webkit-box-sizing: border-box;
						box-sizing: border-box;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 180px;
						display: block;
						border-left: 2px solid #0080ff;
						margin-left: 4px;
						padding-left: 3px;
					}
				}
				.tools{
					color: #ccc;
					>.el-icon{
						cursor: pointer;
					}
				}
			}
		}
		>.body{
			width: 100%;
			height: calc(100% - 40px);
			overflow: hidden;
			.item{
			  height: 35px;
			  padding-top: 5px;
			  padding-left: 10px;
			  color: #ccc;
			  cursor: pointer;
			  border-left: 2px solid transparent;
			  >.dot {
			    width: 8px;
			    height: 8px;
			    border-radius: 100%;
			    background: #ccc;
			    margin-right: 0.5rem;
				float: left;
				margin-top: 8px;
			  }
			  >div{
				 float: left;
				 >span{
					 color: #ccc;
					 font-size: 13px;
				 }
			  }
			}
			.item:hover{
				border-left:2px solid #3fa3ff;
				background-color: rgba(63, 163, 255, 0.2) !important;
			}
			.item.active{
				border-left:2px solid #3fa3ff;
				background-color: rgba(63, 163, 255, 0.5490196078) !important;
				>.dot {
					width: 8px;
					height: 8px;
					border-radius: 100%;
					background: #ccc;
					margin-right: 0.5rem;
					float: left;
					margin-top: 8px;
					/* background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); */
				/* 	background-image: linear-gradient(red, yellow, green); */
					background: linear-gradient(-120deg,  #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); /* 背景渐变 */
					background-size: 500% 500%; /* 背景大小 */
					animation: gradientBG 15s ease infinite; /* 应用动画 */
					
					animation:fade 1500ms infinite;
					-webkit-animation:fade 1500ms infinite;
				}
			}
		}
	}
	
	:deep(.el-collapse) {
	    border-top: 1px solid transparent;
	    border-bottom: 1px solid #51566424;
	}
	
	:deep(.el-collapse-item__header) {
	    display: flex;
	    align-items: center;
	    height: 35px;
	    line-height: 35px;
	    background-color: transparent;
	    color: #ccc;
	    cursor: pointer;
	    border-bottom:1px solid #51566424;
		padding-left: 5px;
	}
	
	:deep(.el-collapse-item__wrap) {
	    background-color: transparent;
	    overflow: hidden;
	    box-sizing: border-box;
	    border-bottom: 1px solid #51566424;
	}
	
	:deep(.el-collapse-item__content) {
	    padding-bottom: 0px;
	}
	
	
	/* 定义 keyframes 动画 */
	@keyframes gradientBG {
	  0% {
	    background-position: 0% 50%;
	  }
	  50% {
	    background-position: 100% 50%;
	  }
	  100% {
	    background-position: 0% 50%;
	  }
	}
	
	@keyframes fade {
	  from { opacity: 1.0; }
	  50% { opacity: 0.4; }
	  to { opacity: 1.0; }
	}
	@-webkit-keyframes fade {
	  from { opacity: 1.0; }
	  50% { opacity: 0.4; }
	  to { opacity: 1.0; }
	}
</style>